<template>
	<view class="content">
		<navTop :title="navtop.title" :isHeight="false" :searchshow="true" hasBgc="#fff" :color="navtop.color" :tipsShow="true" @seach="searchKeyWord"></navTop>
		<view :style="{paddingTop:barHeight+'rpx'}">
			
		</view>
		<view class="top-message" v-if="messageInfo.content" @click="gotoMessage">
			<image :src="news" mode="" class="top-message__img"></image>
			<view class="top-message__text">
				{{messageInfo.content}}
			</view>
			<image :src="vDown" mode="" class="top-message__right"></image>
		</view>
		<view class="content-body__users">
			<view class="content-users__title">
				Pop User
			</view>
			<view class="content-users__list">
				<view class="content-users__item" v-for="(v, i) in userList" :key="i" @click="gotoDetail(v,i)">
					<image :src="v.head"  mode="aspectFill" class="content-users__img"></image>
					<view class="content-users__ititle">
						{{v.name || ''}}
					</view>
					<view class="content-users__itips">
						Welcome to here 
					</view>
					<view class="content-users__itips2">
						{{v.tips || ''}}
					</view>
				</view>
			</view>
		</view>
		<view class="content-top">
			<view class="content-top__title">
				<view class="content-top__item" :class="{'active' : active == i }" v-for="(v, i) in titleList" :key="i" @click="changeModel(v, i)">
					{{v.name}}
				</view>
			</view>
		</view>
		<view v-show="active == 0">
			<view class="content-list" v-if='squareList.length'>
				<view class="content-item" v-for="(v, i) in squareList" :key="i" @click="gotoPage(v)">
					<view class="content-list__official" v-if="v.isOfficial">
						<image :src="official" mode="" class="content-list__o"></image>
						<text class="content-list__t">official</text>
					</view>
					<view class="content-list__title">
						<image :src="v.accountHead" @click="gotoDetail(v,i)" mode="aspectFit" class="content-list__title-img"></image>
						<view>
							<view>{{v.accountName}}</view>
							<text class="content-list__title-time">{{v.tips}}</text>
						</view>
					</view>
					<view class="content-list__text">
						{{v.content || ''}}
					</view>
					<view class="content-list__imgs">
						<image :src="item.imgUrl"  mode="aspectFit" class="content-list__imgs-item" v-for="(item, index) in v.imgList" :key="index" @click.stop="searchImg(index, v.imgList)">
						</image>
					</view>
					<view class="content-list__btns" @click.stop="addLike(v)">
						<image :src="v.isLike ? like : notLike" mode="" class="content-list__btns-img"></image>
						<text>{{v.likes || 0}}</text>
					</view>
				</view>
				<load :status="moreStatus" v-if="squareList.length > 19"/>
			</view>
			<view v-else class="not-data">
				Not data
			</view>
		</view>
		<view v-show="active == 1">
			<view class="content-list" v-if='squareFllowList.length'>
				<view class="content-item" v-for="(v, i) in squareFllowList" :key="i" @click="gotoPage(v)">
					<view class="content-list__official" v-if="true">
						<image :src="official" mode="" class="content-list__o" ></image>
						<text class="content-list__t">official</text>
					</view>
					<view class="content-list__title">
						<image :src="v.accountHead"  mode="aspectFit" @click="gotoDetail(v,i)" class="content-list__title-img"></image>
						<view>
							<view>{{v.accountName}}</view>
							<text class="content-list__title-time">{{v.tips}}</text>
						</view>
					</view>
					<view class="content-list__text">
						{{v.content || ''}}
					</view>
					<view class="content-list__imgs">
						<image :src="item.imgUrl"   mode="aspectFit" class="content-list__imgs-item" v-for="(item, index) in v.imgList" :key="index" @click.stop="searchImg(index, v.imgList)">
							
						</image>
					</view>
					<view class="content-list__btns" @click.stop="addLike(v)">
						<image :src="v.isLike ? like : notLike" mode="" class="content-list__btns-img"></image>
						<text>{{v.likes || 0}}</text>
					</view>
				</view>
				<load :status="moreStatusFllow" v-if="squareFllowList.length > 19"/>
			</view>
			<view v-else class="not-data">
				Not data
			</view>
		</view>
		<view class="send-btn" @click="gotoSend">
			<image :src="send" mode="" class="send-btn__img"></image>
		</view>
		<customTarbar :selectIndex="1" />
	</view>
</template>
<script>
import navTop from '@/components/nav-title.vue';
import customTarbar from '@/components/custom-tarbar.vue';
import load from '@/components/uni-load-more/uni-load-more.vue';

import news from '@/static/news.png'
import vDown from '@/static/v-down.png'
import banner from '@/static/home_active.png'
import like from '@/static/like.png'
import send from '@/static/send.png'
import notLike from '@/static/not-like.png'
import official from '@/static/official.png'

	export default {
		components: {
			navTop,
			customTarbar,
			load
		},
		data() {
			return {
				banner,
				like,
				notLike,
				send,
				vDown,
				news,
				official,
				messageInfo: {},
				barHeight: 0,
				active: 0,
				page: 1,
				fllowPage: 1,
				moreStatus: 'more',
				moreStatusFllow: 'more',
				keyword: '',
				keyword1: '',
				userList: [
				],
				navtop: {
					title: ' ',
					color: '#024230'
				},
				titleList: [
					{
						name: 'Popular'
					},
					{
						name: 'Follow'
					}
				],
				squareList: [],
				squareFLlowList: [],
				total: 0
			}
		},
		onLoad() {
		},
		mounted() {
			this.getList(1)
			this.getUsers()
			this.getMessage()
		},
		created() {
			this.isBarHeight999().then((statusBarHeight)=>{
				this.barHeight = statusBarHeight + 150
				console.log(this.barHeight)
			})
		},
		async onReachBottom(){
			if (this.active == 0) {
				this.reachList()
			}
		},
		methods: {
			gotoMessage() {
				uni.navigateTo({
					url: '/pages/square/message'
				});
			},
			getMessage() {
				this.$http('get', '/app/me/message').then((res) => {
					if (res.success) {
						this.messageInfo = res.data[0] || {}
					}
				})
			},
			searchKeyWord(keyword) {
				this.keyword = ''
				this.keyword1 = ''
				console.log(this.active)
				if (this.active == 0) {
					this.keyword = keyword
					this.getList(1)
				} else {
					this.keyword1 = keyword
					this.getFllowList(1)
				}
			},
			getUsers() {
				this.$http('get', '/app/popUsers').then(res => {
					if (res.success) {
						res.data.forEach((v) => {
							v.tips = this.$utils.getTimerOff(v.loginTime)
						})
						this.userList = res.data
					}
				})
			},
			getList(page = 1) {
				this.$http('get', '/app/dynamic/list', {
					page,
					limt: 20,
					keyword: this.keyword
				}).then(res => {
					if (res.success) {
						this.page = page
						res.data.forEach((v) => {
							v.tips = this.$utils.getTimerOff(v.createTime)
						})
						this.total = res.count
						this.squareList = res.data
					}
				})
			},
			reachList() {
				if (this.moreStatus == 'more' && this.total > 20) {
					this.moreStatus = 'loading'
					this.$http('get', '/app/dynamic/list', {
						page: this.page + 1,
						limt: 20
					}).then((res) => {
						if (res.success) {
							this.page = this.page + 1
							res.data.forEach((v) => {
								v.tips = this.$utils.getTimerOff(v.createTime)
							})
							this.squareList.push(... (res.data || []))
							console.log(this.squareList)
							this.moreStatus = 'more'
						} else {
							this.moreStatus = 'more'
						}
					})
				}
			},
			gotoDetail(v, i) {
				uni.navigateTo({
					url: '/pages/me/userDetail?id=' + v.id
				})
			},
			getFllowList(fllowPage = 1) {
				this.$http('get', '/app/dynamic/follow/list', {
					page: fllowPage,
					limt: 20,
					keyword: this.keyword1
				}).then(res => {
					if (res.success) {
						this.fllowPage = fllowPage
						res.data.forEach((v) => {
							v.tips = this.$utils.getTimerOff(v.loginTime)
						})
						this.squareFLlowList = res.data
					}
				})
			},
			reachFllowList() {
				if (this.moreStatusFllow == 'more' && this.total > 20) {
					this.moreStatusFllow = 'loading'
					this.$http('get', '/app/dynamic/follow/list', {
						page: this.fllowPage + 1,
						limt: 20
					}).then((res) => {
						if (res.success) {
							this.fllowPage = this.fllowPage + 1
							res.data.forEach((v) => {
								v.tips = this.$utils.getTimerOff(v.createTime)
							})
							this.squareFLlowList.push(... (res.data || []))
							console.log(this.squareFLlowList)
							this.moreStatusFllow = 'more'
						} else {
							this.moreStatusFllow = 'more'
						}
					})
				}
			},
			changeModel(v, i) {
				this.active = i
				if (i == 0) {
					this.getList(1)
				} else {
					this.getFllowList(1)
				}
			},
			gotoSend() {
				if (this.$utils.checkLogin()) {
					uni.navigateTo({
						url: '/pages/square/send'
					});
				}
			},
			gotoPage(v) {
				uni.navigateTo({
					url: `/pages/square/details?id=${v.id}`
				});
			},			
			searchImg(i, imgList) {
				imgList = imgList.map((v) => {
					return v.imgUrl
				})
				uni.previewImage({
					current:i, //预览图片的下标
					urls: imgList//预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			addLike(v) {
				this.$http('get', '/app/thumbs', {
					dynamicId: v.id
				}).then((res) => {
					if (res.success) {
						if (v.isLike == 1) {
							v.isLike = 0
							v.likes -= 1
						} else {
							v.isLike = 1
							v.likes += 1
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	
	.content-top__title {
		margin-top: 12rpx 0 30rpx;
		padding: 30rpx 28rpx 0;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.content-top__item {
			margin-right:40rpx;
			position: relative;
			color: rgba(31, 31, 31, 0.45);
			height: 80rpx;
		}
		.active{
			color: #1F1F1F;
		}
		.active::after {
			content: ' ';
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			transform: translate(-50%, 0);
			display: inline-block;
			margin-top: 20rpx;
			width: 48rpx;
			height: 8rpx;
			background-color: #0078FF;
		}
	}
.content-list {
	padding: 30rpx;
	box-sizing: border-box;
	padding-bottom: 160rpx;
	.content-item {
		background-color: #fff;
		padding: 32rpx 40rpx;
		box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
		border-radius: 4px;
		box-sizing: border-box;
		position: relative;
		margin-bottom: 16rpx;
		.content-list__title {
			height: 80rpx;
			display: flex;
			justify-content: flex-start;
			align-items: flex-start;
			font-size: 32rpx;
			font-family: Helvetica;
			color: #1F1F1F;
			margin-bottom: 8rpx;
		}
		.content-list__text {
			margin: 32rpx;
			font-size: 30rpx;
			font-family: Helvetica;
			color: #1F1F1F;
		}
		.content-list__title-time {
			font-size: 22rpx;
			font-family: Helvetica;
			color: rgba(31, 31, 31, 0.45);
		}
		.content-list__title-img {
			width: 80rpx;
			height: 80rpx;
			margin-right: 20rpx;
			border-radius: 50%;
		}
	}
}
.content-list__imgs {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin-bottom: 32rpx;
	.content-list__imgs-item {
		width: 190rpx;
		height: 190rpx;
		border-radius: 8rpx;
		background-color: #000;
		margin-right: 18rpx;
	}
}
.content-list__btns {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	font-size: 28rpx;
	font-family: Helvetica;
	color: rgba(31, 31, 31, 0.45);
	.content-list__btns-img {
		width: 48rpx;
		height: 48rpx;
		margin-right: 8rpx;
	}
}
.send-btn{
	width: 88rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(180deg, #439BFF 0%, #0078FF 100%);
	box-shadow: 0px 4px 16px 0px rgba(0, 120, 255, 0.25);
	border-radius: 50%;
	position: fixed;
	right: 30rpx;
	bottom: 160rpx;
	.send-btn__img {
		width: 32rpx;
		height:32rpx
	}
}

.not-data {
	padding-top: 15vh;
	text-align: center;
	color: rgba(0, 0, 0, 0.6);
	font-size: 32rpx;
}


.content-body__users {
	margin: 20rpx 0 50rpx;
	padding: 0 30rpx;
}
.content-users__title {
	font-size: 40rpx;
	font-family: Helvetica-Bold, Helvetica;
	font-weight: bold;
	color: #1F1F1F;
	margin-bottom: 24rpx;
}
.content-users__list {
	width: 100%;
	overflow-x: auto;
	width: 100%;
	height: 364rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
}
.content-users__item {
	margin-right: 32rpx;
	width: 224rpx;
}
.content-users__img {
	width: 180rpx;
	height: 180rpx;
	border-radius: 10rpx;
	margin-bottom: 24rpx;
}
.content-users__ititle {
	font-size: 30rpx;
	font-family: Helvetica;
	color: #1F1F1F;
	line-height: 40rpx;
}
.content-users__itips {
	font-size: 24rpx;
	font-family: Helvetica;
	color: rgba(31, 31, 31, 0.65);
	line-height: 32rpx;
}
.content-users__itips2 {
	font-size: 22rpx;
	font-family: Helvetica;
	color: rgba(31, 31, 31, 0.65);
	line-height: 24rpx;
	margin-top: 9rpx;
}

.top-message {
	height: 80rpx;
	margin: 0 30rpx;
	background: #FFFFFF;
	box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 26rpx;
	font-family: Helvetica;
	color: rgba(31, 31, 31, 0.65);
	padding: 0 20rpx;
	.top-message__img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.top-message__text {
		width: 100%;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
	}
	.top-message__right {
		width: 32rpx;
		height: 32rpx;
		
	}
}
.content-list__official {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 20rpx;
	.content-list__o {
		width: 96rpx;
		height: 96rpx;
		top: 0;
		right: 0;
	}
	.content-list__t {
		transform: rotate(42deg);
		position: absolute;
		top: 10px;
		right: 0;
		color: #fff;
	}
}
</style>
